<template>
  <div id="chainStoreHome" ref="jumpPage" :style="{ '--color': `${themeBaseColorOpacity}` }">
    <van-sticky>
      <div class="topHead">
        <van-icon name="arrow-left" color="#ffffff" size="25" @click="toBack" />
        <van-search v-model="keyWord" placeholder="请输入搜索关键词" shape="round" @search="toSearchGood" />
      </div>
    </van-sticky>
    <div class="topBg"></div>
    <div class="storeDetail" v-if="info.store_info">
      <div class="storeDetail_line">
        <div class="left" @click="getTypeChange">
          {{ info.store_info.store_name }}
          <van-icon name="arrow" color="#000000" size="16" />
        </div>
        <div class="right">
          <div class="rightTxt" @click="getTypeChange" :class="[get_type == 1 ? 'idDefault' : '']">自提</div>
          <div class="rightTxt" @click="getTypeChange" :class="[get_type != 1 ? 'idDefault' : '']">外送</div>
        </div>
      </div>
      <div class="storeDetail_line" v-if="get_type != 3">
        <div class="d_line">
          <i class="iconfont icon-seller-position"></i>
          <div class="d_line_txt">距离您{{ info.store_info.distance }}{{ info.store_info.unit }}</div>
        </div>
      </div>
      <div class="storeDetail_line">
        <div class="d_line" @click="storeDetailShow = true">
          <i class="iconfont icon-info_store"></i>
          <div class="d_line_txt">
            查看门店信息（配送说明/资质）
            <i class="iconfont icon-icon_more"></i>
          </div>
        </div>
      </div>
      <div class="storeDetail_line">
        <div class="d_line">
          <i class="iconfont icon-kc_line_fahuo"></i>
          <div class="d_line_txt">{{ info.store_info.dispatch }}</div>
        </div>
      </div>
    </div>
    <!-- 公告 -->
    <template v-if="info.notice && info.notice.length > 0">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="item in info.notice" :key="item">
          <div class="proclamation" @click="toNoticeUrl_show(item.url)">
            <i class="iconfont icon-gonggao"></i>
            <p>{{ item.title }}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </template>
    <!-- 轮播 -->
    <div class="banner" v-if="info.carousel && info.carousel.length > 0">
      <GoodsSwiper :thumb_url="info.carousel" :banner="true"></GoodsSwiper>
    </div>
    <!-- 滑动列表 -->
    <van-sticky offset-top="3rem" @change="stickChange">
      <sotreGood
        @tapGood="childGoodTap"
        :themeColor="themeColor"
        :cart="info.member_cart"
        :jumpToPage="jumpToPage"
        :categoryChild="category"
        :stickyShow="stickyShow"
        :cardata="info.member_cart"
        :goodsCartsTotal="goodsCartsTotal"
        :store_id="store_id"
        :themeBaseColorOpacity="themeBaseColorOpacity"
        @updateChild="getCart"
      >
      </sotreGood>
    </van-sticky>

    <!-- 购物车start  showGood && !showCarList?'posCartBoxTop':''-->
    <div class="posCartBox set-pc-style" @click="showCarList = true" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" v-if="info && info.member_cart">
      <div class="left">
        <div class="posCartNum" v-if="cartsNum">{{ cartsNum }}</div>
        <div class="buyIcon">
          <i class="iconfont icon-gouwuche_" />
        </div>
        <div class="price">
          <span class="left_t">{{ $i18n.t("money") }}</span>
          {{ cartsTotal }}
        </div>
      </div>
      <div class="right" @click.stop="goodsOrder">去结算</div>
    </div>
    <yzCartList
      :showDestory="true"
      :goodImg="true"
      v-model="showCarList"
      @focus="numberRight1"
      @blur="numberRight1"
      @minus="numberRight1"
      @plus="numberRight1"
      @clearCart="clearCartChild"
      :cardata="info.member_cart.json"
      v-if="info.member_cart"
      :themeColor="themeColor"
    >
      <div class="showCartGoodList">
        <div class="left">
          <span class="left_t">{{ $i18n.t("money") }}</span>
          {{ cartsTotal }}
        </div>
        <div class="right">
          <div class="btn" @click.stop="goodsOrder">去结算</div>
        </div>
      </div>
    </yzCartList>
    <!-- 购物车end -->

    <!-- 详情弹窗 
      @addOne="numberRight1"
      @focus="numberRight1"
      @blur="numberRight1"
      @minus="numberRight1"
      @plus="numberRight1"
      @childBlur="numberRight1"
    -->
    <yzGoodsPopup
      @updateChild="getCart"
      :store_id="store_id"
      :cardata="carts"
      :goodsCartsTotal="goodsCartsTotal"
      :roundShow="true"
      :_goodsInfo="_goodsInfo"
      :showgp="showGood"
      v-if="showGood"
      :goodsInfo="activeGood"
      :themeColor="themeColor"
      :cartsNum="cartsNum"
      :cartsTotal="cartsTotal"
      @onEmit="yzGoodsPopupClose"
      @toOrder="goodsOrder"
      @cartUpdate="cartUpdate"
    />
    <!-- 详情弹窗 -->

    <van-popup v-model="noticeShow" round position="bottom" :style="{ height: '50%' }" closeable>
      <div class="noticeShowBox">
        <div class="title">公告</div>
        <div class="noticeShowBox_list" v-for="item in info.notice" :key="item">
          <div class="left">{{ item.title }}</div>
          <div class="right" @click="toNoticeUrl(item.url)" v-if="item.url">
            查看
            <i class="iconfont icon-icon_more11"></i>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="storeDetailShow" round position="bottom" :style="{ height: '70%' }" closeable>
      <div class="noticeShowBox">
        <div class="title">门店信息</div>
        <div class="deliveryPrice" v-if="info.store_info && info.store_info.store_delivery">门店配送起送价¥{{ info.store_info.store_delivery.delivery_amount }}</div>
        <div class="title_left" style="margin-bottom:0;">配送范围</div>
        <div class="text_explain" v-html="info.store_info.store_delivery.delivery_note" v-if="info.store_info && info.store_info.store_delivery"></div>
        <div style="width: 100%; height: 18.75rem" v-if="info.store_info && info.store_info.store_delivery">
          <delivery-map :center_path="locations" :path_list="delivery_area"></delivery-map>
        </div>
        <template v-if="info.store_info && info.store_info.aptitude_imgs.length > 0">
          <div class="title_left" style="font-weight: 500;">资质</div>
          <div class="certification">
            <template v-for="(item, index) in info.store_info.aptitude_imgs">
              <img :src="item" alt="" :key="index" />
            </template>
          </div>
        </template>
      </div>
    </van-popup>
  </div>
</template>
<script>
import GoodsSwiper from "components/goods/children/goods_swiper"; //轮播(新)

import sotreGood from "./components/storeGood.vue";
// import sectionTest from "./components/section.vue";
import deliveryMap from "../../components/delivery_map.vue";
import yzCartList from "../../components/ui_components/yz_cartList.vue";
import yzGoodsPopup from "./components/yz_goodsPopup.vue";
export default {
  data() {
    return {
      keyWord: "",
      category: [],
      info: [],
      noticeShow: false,
      stickyShow: false,
      storeDetailShow: false,
      showCarList: false,
      get_type: 1,
      store_id: "",
      lng: "",
      lat: "",
      delivery_area: [],
      locations: [],
      themeColor: "",

      carts: [], //购物车商品
      goodsCarts: [], //购物车转为goods key的数组
      cartsNum: 0,
      cartsTotal: 0.0,
      goodsCartsTotal: [],
      goodsInfo: {},
      goodsCartsOld: "",
      cartPostClick: true,
      showGood: false,
      activeGood: {},
      _goodsInfo: {},
      themeBaseColorOpacity: ""
    };
  },
  components: { sotreGood, deliveryMap, yzCartList, yzGoodsPopup, GoodsSwiper },
  activated() {
    if (this.$route.query.get_type) {
      this.get_type = this.$route.query.get_type;
    }
    if (this.$route.query.store_id) {
      this.store_id = this.$route.query.store_id;
    }
    if (this.$route.query.lng) {
      this.lng = this.$route.query.lng;
    }
    if (this.$route.query.lat) {
      this.lat = this.$route.query.lat;
    }
    this.init();
    if (this.get_type === "4") {
      let myLocation = JSON.parse(localStorage.getItem("myLocation"));
      this.myLocation = myLocation;
      if (myLocation && myLocation.timestamp) {
        //解决定位选择“全国”后返回或者跳转其他页面返回又重新定位当前
        this.lat = myLocation.point.lat;
        this.lng = myLocation.point.lng;
        this.getData();
      } else {
        this.fun
          .getLocation("正在定位")
          .then(res => {
            this.lat = res.point.lat;
            this.lng = res.point.lng;
            this.getData();
          })
          .catch(err => {
            this.getData();
          });
      }
    } else {
      this.getData();
    }
    this.themeColor = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color || "";
  },
  methods: {
    init() {
      this.keyWord = "";
    },
    clearCartChild(key) {
      var that = this;
      var destroyCarts = [];
      this.carts.forEach(item => {
        if(key == 'fail'){
          // 清楚失效的购物车商品
          if(item.is_failure == 1){
            destroyCarts.push(item.id);
          }
        }else{
          destroyCarts.push(item.id);
        }
      });
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.destroy",
          {
            store_id: this.store_id,
            ids: destroyCarts
          },
          ""
        )
        .then(
          response => {
            if (response.result == 1) {
              that.getCart();
              that.showCarList = false;
              // that.popNum = 0;
            } else {
              that.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    goodsOrder(status) {
      let val = this.goodsCarts;
      let sum = 0;
      if (!status && !this.isHasDifferType(val)) {
        return;
      }

      this.carts.forEach(val => {
        sum += val.total;
      });

      if (sum == 0) {
        this.$toast("购物车暂无商品");
        return;
      }

      if (val.length == 0 || this.carts.length == 0) {
        return;
      } else {
        console.log(this.get_type, "get_type");
        this.$router.push(
          this.fun.getUrl(
            "goodsorder",
            {},
            {
              store_id: this.store_id,
              tag: "store",
              get_type: this.get_type
            }
          )
        );
      }
    },
    isHasDifferType(data) {
      //门店购物车提交结算的时候，要判断当前购物车中是否同时存在普通商品和安装服务商品，如果同时存在，要弹框提示
      // 商品不是安装服务商品，直接没有live_install这个字段
      let open_state = 0; //有安装服务的商品
      let clone_state = 0; //没安装服务的商品
      let plugin_name = "";
      data.forEach(item => {
        if (item.live_install && item.live_install.open_state == 1) {
          open_state += 1;
          plugin_name = item.live_install.plugin_name;
        } else {
          clone_state += 1;
        }
      });
      if (open_state != 0 && clone_state != 0) {
        //都有值说明存在 两种 不同商品类型，提示框显示
        Dialog.confirm({
          title: "提示",
          message: `普通商品与${plugin_name}商品一同下单将无法享受${plugin_name}，是否继续下单？`
        })
          .then(() => {
            this.goodsOrder(data, true);
          })
          .catch(() => {});
        return false;
      }
      return true;
    },
    childGoodTap(id) {
      $http
        .post(
          "goods.goods.get-goods-page",
          {
            id: Number(id)
          },
          ""
        )
        .then(({ data, msg, result }) => {
          if (result == 0) {
            this.$toast(msg);
            return;
          }
          this._goodsInfo = data;
          this.activeGood = data.get_goods;
          this.showGood = true;
        });
    },
    yzGoodsPopupClose() {
      this.showGood = false;
      this.activeGood = {};
    },
    addOneSpecs(child) {
      this.addCart(child, "", child.total);
    },
    //商品列表 加(弹窗)
    numberRight1(infoChild) {
      console.log(infoChild.name);
      // if (!this.cartPostClick) {
      //   this.$toast("请求中");
      //   return;
      // }
      this.cartPostClick = false;
      if (infoChild.name == "addOne") {
        this.addCart(infoChild, "", infoChild.total);
      }
      if (infoChild.name == "childBlur") {
        console.log(infoChild);
        this.updateCartRequest(infoChild.id, infoChild.total);
        return;
      }
      if (infoChild.name == "minus") {
        let goodsT;
        for (let i = 0; i < this.info.member_cart.json.length; i++) {
          if (this.info.member_cart.json[i].id == infoChild.id) {
            goodsT = this.info.member_cart.json[i];
            break;
          }
        }
        this.updateCartRequest(goodsT.id, -1);
      } else if (infoChild.name == "plus") {
        let goodsT, index;
        for (let i = 0; i < this.info.member_cart.json.length; i++) {
          if (this.info.member_cart.json[i].id == infoChild.id) {
            index = i;
            goodsT = this.info.member_cart.json[i];
            break;
          }
        }
        this.addCart(goodsT, "cart", index);
      } else if (infoChild.name == "blur") {
        let goodsT, index;
        for (let i = 0; i < this.info.member_cart.json.length; i++) {
          if (this.info.member_cart.json[i].id == infoChild.id) {
            index = i;
            goodsT = this.info.member_cart.json[i];
            break;
          }
        }
        if (goodsT.total < 0) {
          Toast("商品数量不能为负数");
          goodsT.total = this.goodsCartsOld;
          return;
        }
        console.log(goodsT.total, this.goodsCartsOld);
        if (goodsT.total < this.goodsCartsOld) {
          let lowerNum = this.goodsCartsOld - goodsT.total;
          this.updateCartRequest(goodsT.id, -lowerNum);
        } else if (goodsT.total > this.goodsCartsOld) {
          let addNum = goodsT.total - this.goodsCartsOld;
          this.updateCartRequest(goodsT.id, addNum);
        } else if (goodsT.total == this.goodsCartsOld) {
          return;
        }
      } else if (infoChild.name == "foucs") {
        this.cartPostClick = true;
        console.log(infoChild, "22222222");
        this.goodsCartsOld = infoChild.total;
      }
    },
    updateCartRequest(id, num) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.updateNum",
          {
            id: id,
            num: num,
            store_id: this.store_id
          },
          "加载中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result == 1) {
              if (num < 0) {
                this.popNum = this.popNum + num;
              } else {
                this.popNum = this.popNum + num;
              }
              this.getCart();
            } else {
              this.$dialog.alert({ message: response.msg });
              this.getCart();
            }
          },
          response => {}
        );
    },
    delItemByCart(cart_id) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.destroy",
          {
            store_id: this.store_id,
            ids: cart_id.id
          },
          ""
        )
        .then(
          response => {
            if (response.result == 1) {
              this.getCart();
              this.popNum--;
              // this.showCart = false;
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    addCart(goods, tag, _i) {
      let id = "";
      if (tag === "cart") {
        id = goods.goods_id;
      } else {
        id = goods.id;
      }
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.store",
          {
            goods_id: id,
            total: 1,
            store_id: this.store_id,
            option_id: goods.option_id || 0
          },
          "添加中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result === 1) {
              // if (tag == "cart") {
              //   this.carts[_i].total = Number(goods.total) + 1;
              // }
              this.getCart(goods);
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    cartUpdate(e) {
      //yzGoodsPopup组件 => posCart组件 有更改过购物车操作
      // console.log(e, "yzGoodsPopup组件 => posCart组件 有更改过购物车操作");
      this.getCart(e);
    },
    getCart(goods) {
      var that = this;
      $http
        .get("plugin.store-cashier.frontend.shoppingCart.member-cart.index", {
          store_id: this.store_id
        })
        .then(
          response => {
            if (response.result === 1) {
              that.carts = response.data;
              this.info.member_cart.json = response.data;
              that.goodsCarts = [];
              that.cartsNum = 0;
              that.cartsTotal = 0;
              that.carts.forEach(item => {
                this.$set(that.goodsCarts, item.goods_id, item);
                if (goods && goods.id == item.goods_id) {
                  goods.buyNum = item.total;
                }
                if (item.goods_id === that.goodsInfo.id && item.option_id === optionsId) {
                  that.popNum = item.total;
                  that.popCard = item;
                }
                that.cartsNum += item.total;
                if(item.is_failure == 0){
                  that.cartsTotal += item.total * item.goods.price;
                }
              });
              that.goodsCartsTotal = that.calculateTotal(that.carts);
              that.cartsTotal = parseFloat(that.cartsTotal).toFixed(2);
            } else {
              //Toast("请输入提货人信息");
              //return;
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        )
        .catch(err => {
          console.log(err);
        });
    },
    toSearchGood() {
      this.$router.push(this.fun.getUrl("chainStoreSearch", { store_id: this.store_id, keyword: this.keyWord }, {}));
    },
    getTypeChange() {
      this.$router.push(this.fun.getUrl("chainStoreSearchStore", {}, {}));
    },
    toBack() {
      if (this.fun.isCPS()) {
        if (this.fun.isIosOrAndroid() === "ios") {
          routeBackUrlIOS({ body: "routeBackUrlIOS" });
        } else {
          routeBackUrlAndroid();
        }
        return;
      }
      this.$router.go(-1);
    },
    jumpToPage(height) {
      this.$refs.jumpPage.scrollIntoView({
        behavior: "smooth"
      });
    },
    stickChange(e) {
      this.stickyShow = e;
    },
    toNoticeUrl_show() {
      this.noticeShow = true;
    },
    toNoticeUrl(url) {
      window.location.href = url;
    },
    getData() {
      let json = { get_type: this.get_type, store_id: this.store_id, lat: this.lat, lng: this.lng };
      if (this.get_type != 1) {
        json.address_id = this.$route.query.address_id;
      }
      if (this.get_type === "4") {
        json = {};
        json.get_type = this.get_type;
        json.lat = this.lat;
        json.lng = this.lng;
      }
      $http
        .get("plugin.chain-store.frontend.controller.index.index", json)
        .then(response => {
          if (response.result == 1) {
            let basic_info = JSON.parse(localStorage.getItem("yz_basic_info"));
            this.themeBaseColorOpacity = basic_info.theme_color + "10";
            this.category = response.data.category;
            this.info = response.data;
            if (response.data.store_info) {
              if (this.get_type == "4" || this.get_type == "3" || this.get_type == "2") {
                this.store_id = response.data.store_info.store_id;
              }
              let _data = response.data.store_info;
              let delivery_area = _data.store_delivery && _data.store_delivery.delivery_area ? _data.store_delivery.delivery_area : [];
              let locations = _data.store_delivery ? _data.store_delivery.locations : [];
              let arr_delivery_area = [];
              delivery_area.forEach((item, index) => {
                arr_delivery_area.push([Number(item.R), Number(item.Q)]);
              });
              this.delivery_area = arr_delivery_area;
              this.locations = [Number(locations.longitude).toFixed(6), Number(locations.latitude).toFixed(6)];
            }
            if (response.data.member_cart) {
              this.getFirstCart(response.data.member_cart.json);
            }
            this.fun.setWXTitle(this.info.store_info.store_name);
          } else {
            this.$toast(response.msg);
            this.$router.push(this.fun.getUrl("chainStoreSearchStore", {}, {}));
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getFirstCart(data) {
      this.carts = data;
      this.goodsCarts = [];
      this.cartsNum = 0;
      this.cartsTotal = 0;
      this.carts.forEach(item => {
        this.$set(this.goodsCarts, item.goods_id, item);
        if (item.goods_id === this.goodsInfo.id && item.option_id === optionsId) {
          this.popNum = item.total;
          this.popCard = item;
        }
        this.cartsNum += item.total;
        if(item.is_failure == 0){
          this.cartsTotal += item.total * item.goods.price;
        }
      });
      this.goodsCartsTotal = this.calculateTotal(this.carts);
      this.cartsTotal = parseFloat(this.cartsTotal).toFixed(2);
    },
    //不同规格的同一商品求和
    calculateTotal(arr) {
      let newArr = []; // 保存求和后的购物车数量列表
      let temp = {};
      let newArr2 = [];
      for (let i in arr) {
        let key = arr[i].goods_id;
        if (temp[key]) {
          temp[key].total = temp[key].total + arr[i].total; //id相同则把数量相加
        } else {
          temp[key] = {};
          temp[key].goods_id = arr[i].goods_id;
          temp[key].total = arr[i].total;
        }
      }
      for (let k in temp) {
        newArr.push(temp[k]);
      }
      newArr.forEach(item => {
        this.$set(newArr2, item.goods_id, item);
      });
      return newArr2;
    }
  }
};
</script>
<style lang="scss" scoped>
#chainStoreHome {
  min-height: 100vh;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}
.topHead {
  // position: sticky;
  // top: 0;
  // left: 0;
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.72rem 0.5rem 0.72rem;
  background: var(--themeBaseColor);
  .van-search {
    padding: 0;
    border-radius: 100%;
  }
}
.topBg {
  height: 6.25rem;
  background: linear-gradient(180deg, var(--themeBaseColor) 0%, rgba(241, 83, 83, 0) 100%);
}
.banner {
  // margin: 0 auto;
  margin: 0.75rem;
  margin-bottom: 0.31rem;
  margin-top: 0;
  // height: 4.69rem;
  background: #fff8f2;
  border-radius: 0.5rem;
  img {
    width: 21.94rem;
    height: 100%;
    border-radius: 0.5rem;
  }
}
.notice-swipe {
  width: 100%;
  height: 2.25rem;
  line-height: 2.25rem;
  margin: 0.4rem 0;
}
.proclamation {
  margin: 0 0.75rem;
  padding: 0 0.59rem;
  height: 2.25rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #af5d3f;
  overflow: hidden;
  border: 0.03rem solid #f0f0f1;
  p {
    text-align: left;
    margin-left: 0.41rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.storeDetail {
  margin: 0 0.75rem;
  margin-top: -6rem;
  padding: 1rem 0.94rem;
  background: #ffffff;
  border: 0.03rem solid #f0f0f1;
  border-radius: 0.5rem;
  box-sizing: border-box;
  .d_line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #6e6e79;
    // font-size: 0.4375rem;
    .iconfont {
      margin-right: 0.44rem;
      color: #6e6e79;
    }
    .d_line_txt {
      display: flex;
      align-items: center;
      .icon-icon_more {
        font-size: 0.4375rem;
        color: #6e6e79;
      }
    }
  }
  .storeDetail_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    .left {
      font-size: 1rem;
      font-weight: bold;
      display: flex;
      align-content: center;
      text-align: left;
      .van-icon-arrow {
        margin-top: 0.25rem;
      }
    }
    .right {
      width: 5rem;
      height: 1.63rem;
      background: var(--color);
      border-radius: 1.88rem;
      display: flex;
      justify-content: space-between;
      .rightTxt {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        color: var(--themeBaseColor);
      }
      .idDefault {
        background: var(--themeBaseColor);
        color: #ffffff;
        border-radius: 1.88rem;
      }
    }
  }
  .storeDetail_line:last-child {
    margin-bottom: 0;
  }
}
.noticeShowBox {
  padding: 0.94rem 0.75rem;
  .title {
    font-size: 1rem;
    font-weight: bold;
    color: #3b3b4a;
  }
  .title_left {
    font-size: 0.88rem;
    font-weight: 500;
    color: #00001c;
    text-align: left;
    margin: 1.25rem 0 0.94rem 0;
  }
  .text_explain {
    margin-top: 0.25rem;
    text-align: left;
    font-size: 0.81rem;
    font-weight: 400;
    color: #6e6e79;
  }
  .deliveryPrice {
    font-size: 0.81rem;
    font-weight: 400;
    color: #6e6e79;
    margin: 1.03rem 0 1.38rem 0;
    text-align: left;
  }
  .certification {
    border-radius: 0.5rem;
    img {
      width: 100%;
      height: auto;
      border-radius: 0.5rem;
    }
  }
  .noticeShowBox_list {
    padding: 0.94rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #d6d6dc;
    .left {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-align: left;
      font-size: 0.81rem;
      font-weight: 400;
      color: #6e6e79;
    }
    .right {
      flex-shrink: 0;
      font-weight: 400;
      color: #f15353;
      font-size: 0.81rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0.28rem;
    }
  }
}
.posCartBox {
  position: fixed;
  bottom: 4rem;
  left: 0;
  height: 3rem;
  border-radius: 1.53rem;
  background: #ffffff;
  margin: 0 0.75rem;
  z-index: 99;
  display: flex;
  .right {
    flex-shrink: 0;
    width: 5.63rem;
    height: 100%;
    border-radius: 0rem 1.53rem 1.53rem 0rem;
    background: var(--themeBaseColor);
    font-size: 0.94rem;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left {
    flex: 1;
    height: 100%;
    width: 16.31rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.37rem;
    background: #00001c;
    border-radius: 1.53rem 0 0 1.53rem;
    box-sizing: border-box;
    position: relative;
    .posCartNum {
      position: absolute;
      left: 2.06rem;
      top: 0;
      font-size: 0.75rem;
      color: #ffffff;
      font-weight: 500;
      padding: 0.16rem 0.34rem;
      border-radius: 100%;
      background: #fca624;
      max-width: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      font-size: 1.13rem;
      font-weight: bold;
      color: #ffffff;
      margin-left: 0.78rem;
      .left_t {
        font-size: 0.75rem;
      }
    }
    .buyIcon {
      width: 2.25rem;
      height: 2.25rem;
      background: var(--themeBaseColor);
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-gouwuche_ {
        color: #ffffff;
        font-size: 1.5rem;
      }
    }
  }
}
.posCartBoxTop {
  bottom: 2rem !important;
  z-index: 99999;
}
.showCartGoodList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.78rem;
  .left {
    font-size: 1.13rem;
    font-weight: bold;
    color: #f15353;
    flex: 1;
    display: flex;
    align-items: center;
    .left_t {
      font-size: 0.75rem;
    }
  }
  .right {
    flex-shrink: 0;
    .btn {
      padding: 0.78rem 1.72rem;
      box-sizing: border-box;
      font-size: 0.94rem;
      font-weight: 500;
      color: #ffffff;
      background: var(--themeBaseColor);
      border-radius: 1.56rem;
    }
  }
}
.iphoneXStyle {
  bottom: 5rem;
}
</style>
